
import React from 'react'
import { IndexBar, NavBar, Popover } from 'react-vant';
import "./index.less"

import { connect } from "react-redux"
import action from '../../../store/action/ymz';

import { getData } from "../../../api"

// 列表组件
import CellCom from "./cell"

// 将汉字转成拼音插件
import { pinyin } from 'pinyin-pro';

function AddressList(props) {
    // 索引栏数据
    const [indexList] = React.useState(['⬆', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'])
    // type类型
    const [type] = React.useState(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'])

    // 筛选后的数据
    const [newData2, setnewData2] = React.useState([])
    // 定义一个变量用来判断是否显示索引栏标签
    const [showLabel, setShowLabel] = React.useState(true)

    // 模拟好友列表总数据
    // const [infoData,setInfoData] = React.useState([])
    // const [friendData,setFriendData] = React.useState([])
    const local = JSON.parse(localStorage.getItem('token'))
    React.useEffect(async () => {

        let dataNew = await getData()
        // setInfoData(dataNew.infos)
        // setFriendData(dataNew.friendData)

        let newArr = dataNew.friendData.filter(item => {
            return dataNew.infos.find(current => {
                if (local.info_id === item.fromId && current.info_id === item.toId && item.state == 0) {
                    item.info = current
                    return item
                }
            })
        })
        if (newArr.length === 0) {
            return false
        }

        // 获取声母
        let newData = newArr.map(item => {
            return {
                createdAt: item.createdAt,
                fromId: item.fromId,
                id: item.id,
                isBlacklist: item.isBlacklist,
                isOnlyChat: item.isOnlyChat,
                msg: item.msg,
                remark: item.remark,
                state: item.state,
                toId: item.toId,
                updatedAt: item.updatedAt,
                uuid: item.uuid,
                QRCode: item.info.QRCode,
                account: item.info.account,
                collect: item.info.collect,
                friendCircle: item.info.friendCircle,
                headPortrait: item.info.headPortrait,
                id: item.info.id,
                info_id: item.info.info_id,
                name: item.info.name,
                pass: item.info.pass,
                phoneNum: item.info.phoneNum,
                sex: item.info.sex,
                signature: item.info.signature,
                site: item.info.site,
                types: window.isNaN(Number(item.info.name.split(' ')[0])) ? item.info.name.split(' ')[0] : Number(item.info.name.split(' ')[0])
            }
        })
        let arr = newData.map(item => {
            let i = type.findIndex(ite => {
                return item.types === ite
            })
            return {
                createdAt: item.createdAt,
                fromId: item.fromId,
                id: item.id,
                isBlacklist: item.isBlacklist,
                isOnlyChat: item.isOnlyChat,
                msg: item.msg,
                remark: item.remark,
                state: item.state,
                toId: item.toId,
                updatedAt: item.updatedAt,
                uuid: item.uuid,
                QRCode: item.QRCode,
                account: item.account,
                collect: item.collect,
                friendCircle: item.friendCircle,
                headPortrait: item.headPortrait,
                id: item.id,
                info_id: item.info_id,
                name: item.name,
                pass: item.pass,
                phoneNum: item.phoneNum,
                sex: item.sex,
                signature: item.signature,
                site: item.site,
                types: i !== -1 ? type[i] : typeof item.types === 'number' ? String.fromCharCode(64 + parseInt(item.types)) : pinyin(item.name, { pattern: 'initial', type: 'array' })[0].slice(0, 1)
            }
        })
        console.log(arr);
        const data = [
            {
                QRCode: "二维码",
                account: "hello12345",
                collect: [],
                createdAt: "2022-02-10T16:22:19.000Z",
                friendCircle: ['朋友圈'],
                fromId: "2693bf24-8ca7-47ee-b758-09babdf3d282",
                headPortrait: "https://img0.baidu.com/it/u=1036575455,1126937155&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                id: 4,
                info_id: "9e39a9c3-099b-4786-ac59-9c5ced5fccca",
                isBlacklist: false,
                isOnlyChat: false,
                msg: "请求添加你为好友",
                name: "古",
                pass: "abc1234",
                phoneNum: 13373125714,
                remark: "小古",
                sex: "男",
                signature: "个性签名",
                site: "北京",
                state: "0",
                toId: "9e39a9c3-099b-4786-ac59-9c5ced5fccca",
                types: "g",
                updatedAt: "2022-02-10T16:22:19.000Z",
                uuid: "a1fc2806-0b3d-48d3-895a-1cd06db470e6",
            },
            {
                QRCode: "二维码",
                account: "xiaohei123",
                collect: [],
                createdAt: "2022-02-09T16:28:13.000Z",
                friendCircle: ['朋友圈'],
                fromId: "2693bf24-8ca7-47ee-b758-09babdf3d282",
                headPortrait: "https://img0.baidu.com/it/u=1036575455,1126937155&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                id: 2,
                info_id: "01c84dbb-e0d5-435e-8cfb-01240f000de8",
                isBlacklist: false,
                isOnlyChat: false,
                msg: "你好小黑",
                name: "小黑",
                pass: "abc1234",
                phoneNum: 13377340124,
                remark: "小黑",
                sex: "男",
                signature: "个性签名",
                site: "北京 朝阳",
                state: "0",
                toId: "01c84dbb-e0d5-435e-8cfb-01240f000de8",
                types: "g",
                updatedAt: "2022-02-09T16:28:13.000Z",
                uuid: "a1fc2806-0b3d-48d3-895a-1cd06db470e6",
            },
            {
                QRCode: "二维码",
                account: "xiaohei123",
                collect: [],
                createdAt: "2022-02-09T16:28:13.000Z",
                friendCircle: ['朋友圈'],
                fromId: "2693bf24-8ca7-47ee-b758-09babdf3d282",
                headPortrait: "https://img0.baidu.com/it/u=1036575455,1126937155&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                id: 2,
                info_id: "01c84dbb-e0d5-435e-8cfb-01240f000de8",
                isBlacklist: false,
                isOnlyChat: false,
                msg: "你好小黑",
                name: "小黑",
                pass: "abc1234",
                phoneNum: 13377340124,
                remark: "小黑",
                sex: "男",
                signature: "个性签名",
                site: "北京 朝阳",
                state: "0",
                toId: "01c84dbb-e0d5-435e-8cfb-01240f000de8",
                types: "h",
                updatedAt: "2022-02-09T16:28:13.000Z",
                uuid: "a1fc2806-0b3d-48d3-895a-1cd06db470e6",
            },
            {
                QRCode: "二维码",
                account: "xiaohei123",
                collect: [],
                createdAt: "2022-02-09T16:28:13.000Z",
                friendCircle: ['朋友圈'],
                fromId: "2693bf24-8ca7-47ee-b758-09babdf3d282",
                headPortrait: "https://img0.baidu.com/it/u=1036575455,1126937155&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                id: 2,
                info_id: "01c84dbb-e0d5-435e-8cfb-01240f000de8",
                isBlacklist: false,
                isOnlyChat: false,
                msg: "你好小黑",
                name: "小黑",
                pass: "abc1234",
                phoneNum: 13377340124,
                remark: "小黑",
                sex: "男",
                signature: "个性签名",
                site: "北京 朝阳",
                state: "0",
                toId: "01c84dbb-e0d5-435e-8cfb-01240f000de8",
                types: "h",
                updatedAt: "2022-02-09T16:28:13.000Z",
                uuid: "a1fc2806-0b3d-48d3-895a-1cd06db470e6",
            },
            {
                QRCode: "二维码",
                account: "xiaohei123",
                collect: [],
                createdAt: "2022-02-09T16:28:13.000Z",
                friendCircle: ['朋友圈'],
                fromId: "2693bf24-8ca7-47ee-b758-09babdf3d282",
                headPortrait: "https://img0.baidu.com/it/u=1036575455,1126937155&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                id: 2,
                info_id: "01c84dbb-e0d5-435e-8cfb-01240f000de8",
                isBlacklist: false,
                isOnlyChat: false,
                msg: "你好小黑",
                name: "小黑",
                pass: "abc1234",
                phoneNum: 13377340124,
                remark: "小黑",
                sex: "男",
                signature: "个性签名",
                site: "北京 朝阳",
                state: "0",
                toId: "01c84dbb-e0d5-435e-8cfb-01240f000de8",
                types: "x",
                updatedAt: "2022-02-09T16:28:13.000Z",
                uuid: "a1fc2806-0b3d-48d3-895a-1cd06db470e6",
            }
        ]
        let a = []
        data.forEach(item => {
            item.types = item.types === 'a' || item.types === 'A' ? 'A' : (item.types === 'b' || item.types === 'B' ? 'B' : (item.types === 'c' || item.types === 'C' ? 'C' : (item.types === 'd' || item.types === 'D' ? 'D' : (item.types === 'e' || item.types === 'E' ? 'E' : (item.types === 'f' || item.types === 'F' ? 'F' : (item.types === 'g' || item.types === 'G' ? 'G' : (item.types === 'h' || item.types === 'H' ? 'H' : (item.types === 'i' || item.types === 'I' ? 'I' : (item.types === 'j' || item.types === 'J' ? 'J' : (item.types === 'k' || item.types === 'K' ? 'K' : (item.types === 'l' || item.types === 'L' ? 'L' : (item.types === 'm' || item.types === 'M' ? 'M' : (item.types === 'n' || item.types === 'N' ? 'N' : (item.types === 'o' || item.types === 'O' ? 'O' : (item.types === 'p' || item.types === 'P' ? 'P' : (item.types === 'q' || item.types === 'Q' ? 'Q' : (item.types === 'r' || item.types === 'R' ? 'R' : (item.types === 's' || item.types === 'S' ? 'S' : (item.types === 't' || item.types === 'T' ? 'T' : (item.types === 'u' || item.types === 'U' ? 'U' : (item.types === 'v' || item.types === 'V' ? 'V' : (item.types === 'w' || item.types === 'W' ? 'W' : (item.types === 'x' || item.types === 'X' ? 'X' : (item.types === 'y' || item.types === 'Y' ? 'Y' : (item.types === 'z' || item.types === 'Z' ? 'Z' : null)))))))))))))))))))))))))
            a.forEach((ite,index) => {
                if(ite.type !== item.types){
                    a.push( {
                        type: item.types,
                        info: []
                    })
                    console.log(ite.type);
                    return false
                }else{
                    ite.info.push(item)
                    console.log(a);
                }
            })
        })
        a.forEach(item => {
            console.log(item);
        })
        // let dataNewArr = data.filter(item => {
        //     item.types = item.types === 'a' || item.types === 'A' ? 'A' : (item.types === 'b' || item.types === 'B' ? 'B' : (item.types === 'c' || item.types === 'C' ? 'C' : (item.types === 'd' || item.types === 'D' ? 'D' : (item.types === 'e' || item.types === 'E' ? 'E' : (item.types === 'f' || item.types === 'F' ? 'F' : (item.types === 'g' || item.types === 'G' ? 'G' : (item.types === 'h' || item.types === 'H' ? 'H' : (item.types === 'i' || item.types === 'I' ? 'I' : (item.types === 'j' || item.types === 'J' ? 'J' : (item.types === 'k' || item.types === 'K' ? 'K' : (item.types === 'l' || item.types === 'L' ? 'L' : (item.types === 'm' || item.types === 'M' ? 'M' : (item.types === 'n' || item.types === 'N' ? 'N' : (item.types === 'o' || item.types === 'O' ? 'O' : (item.types === 'p' || item.types === 'P' ? 'P' : (item.types === 'q' || item.types === 'Q' ? 'Q' : (item.types === 'r' || item.types === 'R' ? 'R' : (item.types === 's' || item.types === 'S' ? 'S' : (item.types === 't' || item.types === 'T' ? 'T' : (item.types === 'u' || item.types === 'U' ? 'U' : (item.types === 'v' || item.types === 'V' ? 'V' : (item.types === 'w' || item.types === 'W' ? 'W' : (item.types === 'x' || item.types === 'X' ? 'X' : (item.types === 'y' || item.types === 'Y' ? 'Y' : (item.types === 'z' || item.types === 'Z' ? 'Z' : null)))))))))))))))))))))))))
        //     return item
        // })
        // let a=[
        //     {

        //     }
        // ]
        // setnewData2(dataNewArr)
    }, [])
    // PopoverRef
    const popover = React.useRef()
    // 新的朋友事件
    const newFriend = () => {
        props.history.push({
            pathname: "/main/newFriend",
            state: { path: props.location.pathname }
        })
    }
    // 仅聊天的朋友事件
    const onlyChat = () => {
        props.history.push({
            pathname: "/main/onlyChatFriend",
            state: { path: props.location.pathname }
        })
    }
    // 群聊事件
    const groupChat = () => {
        props.history.push({
            pathname: "/main/groupChat",
            state: { path: props.location.pathname }
        })
    }
    // 头部导航栏右侧事件
    const onClickRight = (e) => {
        if (e.target.className.baseVal === "icon search") {
            props.history.push({
                pathname: "/main/search",
                state: { path: props.location.pathname }
            })
        }
    }
    // 跳转到好友详情
    const toFriendMsg = (item) => {
        props.history.push({
            pathname: "/main/friendDetail",
            state: { path: props.location.pathname, msg: item }
        })
    }
    // 发送群聊事件
    const sendGroupChat = () => {
        console.log('发送群聊');
        popover.current.hide();//关闭popover
    }
    // 添加朋友事件
    const addFriend = () => {
        setTimeout(() => {
            props.history.push({
                pathname: "/main/addFriend",
                state: { path: props.location.pathname }
            })
        })
        popover.current.hide();//关闭popover
    }
    // 扫一扫
    const scan = () => {
        console.log('扫一扫');
        popover.current.hide();//关闭popover
    }
    return (
        <div className='addresslist'>
            <header>
                <NavBar
                    title="通讯录"
                    style={{ backgroundColor: "#ededed" }}
                    rightText={<p className='header_icon'>
                        <span>
                            <svg className='icon search' aria-hidden='true' style={{ fontSize: "17px", marginRight: '10px' }}>
                                <use xlinkHref="#icon-sousuo1"></use>
                            </svg>

                            {/* 点击加号出现弹出层 */}
                            <Popover
                                ref={popover}
                                theme="dark"
                                placement='bottom-end'
                                offset={[5, 8]}
                                style={{ width: '100px' }}
                                reference={<span>
                                    <svg className='icon' aria-hidden='true' style={{
                                        fontSize: "15px", border: '1px solid #000',
                                        borderRadius: '50%'
                                    }}>
                                        <use xlinkHref="#icon-jia"></use>
                                    </svg>
                                </span>}
                            >
                                <ul>
                                    <li onClick={sendGroupChat}>
                                        <svg className='icon' aria-hidden='true'>
                                            <use xlinkHref="#icon-xiaoxi2"></use>
                                        </svg>
                                        <p>发起群聊</p>
                                    </li>
                                    <li onClick={addFriend}>
                                        <svg className='icon' aria-hidden='true'>
                                            <use xlinkHref="#icon-tianjiapengyou"></use>
                                        </svg>
                                        <p>添加朋友</p>
                                    </li>
                                    <li onClick={scan}>
                                        <svg className='icon' aria-hidden='true'>
                                            <use xlinkHref="#icon-saoyisao"></use>
                                        </svg>
                                        <p>扫一扫</p>
                                    </li>
                                    <li>
                                        <svg className='icon' aria-hidden='true'>
                                            <use xlinkHref="#icon-icon-test1"></use>
                                        </svg>
                                        <p>收付款</p>
                                    </li>
                                    <li>
                                        <svg className='icon' aria-hidden='true'>
                                            <use xlinkHref="#icon-xiaoxi_xuanzhong"></use>
                                        </svg>
                                        <p>帮助与反馈</p>
                                    </li>
                                </ul>
                            </Popover>
                        </span>
                    </p>}
                    onClickRight={(e) => {
                        onClickRight(e)
                    }}
                />
                {/* <HeaderCom search={search} title="通讯录" icon2="#icon-sousuo1" icon3="#icon-jia"></HeaderCom> */}
            </header>
            <main style={{ position: "relative" }}>
                <IndexBar indexList={indexList} sticky={false}>
                    {/* 顶部 */}
                    <IndexBar.Anchor index="⬆" style={{ opacity: "0", position: 'absolute', left: "0", top: "0" }}></IndexBar.Anchor>
                    <CellCom icon="#icon-xindepengyou1" class="cell_icon_xindepengyou1" title="新的朋友" click={newFriend}></CellCom>
                    <CellCom icon="#icon-liaotiandepengyou" title="仅聊天的朋友" click={onlyChat}></CellCom>
                    <CellCom icon="#icon-qunliao" title="群聊" click={groupChat}></CellCom>
                    <CellCom icon="#icon-biaoqian" title="标签" class="cell_icon_label"></CellCom>
                    <CellCom icon="#icon-gongzhonghao" title="公众号" class="cell_icon_hao"></CellCom>
                    {
                        newData2.map((item, index) => {
                            return <div key={index}>
                                <IndexBar.Anchor index={item.types}>{item.types}</IndexBar.Anchor>
                                <div>
                                    <CellCom toFriendMsg={() => {
                                        toFriendMsg(item)
                                    }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                                </div>
                            </div>
                        })

                        // newData2.length !== 0 ? <div>
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="A">A</IndexBar.Anchor> : null
                        //     }
                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'A' || item.types === 'a' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="B">B</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'B' || item.types === 'b' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="C">C</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'C' || item.types === 'c' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="D">D</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'D' || item.types === 'd' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="E">E</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'E' || item.types === 'e' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="F">F</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'F' || item.types === 'f' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="G">G</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'G' || item.types === 'g' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="H">H</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'H' || item.types === 'h' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="I">I</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'I' || item.types === 'i' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="J">J</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'J' || item.types === 'j' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="K">K</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'K' || item.types === 'k' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="L">L</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'L' || item.types === 'l' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="M">M</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'M' || item.types === 'm' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="N">N</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'N' || item.types === 'n' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="O">O</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'O' || item.types === 'o' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="P">P</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'P' || item.types === 'p' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="Q">Q</IndexBar.Anchor> : null
                        //     }
                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'Q' || item.types === 'q' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="R">R</IndexBar.Anchor> : null
                        //     }
                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'R' || item.types === 'r' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="S">S</IndexBar.Anchor> : null
                        //     }
                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'S' || item.types === 's' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="T">T</IndexBar.Anchor> : null
                        //     }
                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'T' || item.types === 't' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="U">U</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'U' || item.types === 'u' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="V">V</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'V' || item.types === 'v' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="W">W</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'W' || item.types === 'w' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="X">X</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'X' || item.types === 'x' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="Y">Y</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'Y' || item.types === 'y' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        //     {
                        //         showLabel ? <IndexBar.Anchor index="Z">Z</IndexBar.Anchor> : null
                        //     }

                        //     {
                        //         newData2.map((item, index) => {
                        //             return item.types === 'Z' || item.types === 'z' ? <div key={index}>
                        //                 <CellCom toFriendMsg={() => {
                        //                     toFriendMsg(item)
                        //                 }} img={item.headPortrait} title={item.remark !== undefined ? item.remark : item.name}></CellCom>
                        //             </div> : null
                        //         })
                        //     }
                        // </div> : null
                    }
                </IndexBar>
                {/* 底部显示有多少个朋友 */}
                <div className='bottomFriend'>
                    {newData2.length !== 0 ? newData2.length + '个朋友' : '暂无朋友'}
                </div>

            </main>
        </div>
    )
}
export default connect(state => state.ymz, action)(AddressList)

